<template>
    <div class="person">
        <hr />
        <div class="bames">我的真实姓名：{{ store.name }}</div>
        <div class="bames">我的真实年龄：{{ store.age }}</div>
        <div class="bames">我的真实年龄：{{ store.getNewName }}</div>
        <button @click="AddAges">年龄增加</button>
        <button @click="reset">重置数据</button>
        <hr />
        <button @click="login">登录</button>
        <button @click="back">返回</button>
        <br />
        登录信息：{{ content }}
        <br />
        <router-link :to="{ name: 'person' }">去个人页面</router-link>
    </div>
</template>

<script setup>
// 使用store里的方法控制数据变化
import { useStore } from "@/store/index.js";
import { inject, reactive, ref } from "vue";
import { useRouter } from "vue-router";
const store = useStore();
const axios = inject("$axios");
// 函数方法依次写
const AddAges = () => {
    store.setName();
};
// 重置数据
const reset = () => {
    store.$reset();
};

// 路由跳转；返回
const router = useRouter();
const back = () => {
    router.back();
};
//请求接口
const content = ref("");

const login = async () => {
    const res = await axios.get("/SD/wl/yan/du");
    if (res.code == 200) {
        content.value = res.content;
        setTimeout(() => {
            alert("请求成功！");
        }, 1000);
    }
};
</script>

<style scoped lang="less">
button {
    margin: 0 12px;
}
</style>
